<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #iphone_box {
            background: url(images/images1/iphone.jpg);
            width: 426px;
            height: 640px;
            margin: 10px auto;
            position: relative;
        }

        #lock_box {
            width: 360px;
            height: 66px;
            position: absolute;
            left: 34px;
            top: 545px;
            /*				background: red;
            */
        }

        #lock {
            background: url(images/images1/unlock_btn.jpg);
            width: 93px;
            height: 62px;
            position: absolute;
            left: 0px;
            top: 0;
            cursor: pointer;
        }

    </style>

</head>
<body>
<div id="iphone_box">
    <div id="lock_box">
        <div id="lock"></div>
    </div>
</div>
</body>
</html>

<script>

//    /*
//     offsetWidth: 获取元素节点自身的宽度
//     offsetHeight: 获取元素节点自身的高度
//
//     offsetLeft: 和最近的参照物左边界的距离
//     offsetTop: 和最近的参照物上边界的距离
//
//     offsetX: 鼠标位置距离目标元素(鼠标点击的元素)的左边界的距离
//     offsetY: 鼠标位置距离目标元素(鼠标点击的元素)的上边界的距离
//     */

var bigBox = document.getElementById('iphone_box');
var midBox = document.getElementById('lock_box');
var smBox = document.getElementById('lock');

smBox.onmousedown = function(evt){
    var e = evt || window.event;
    var x1 = e.offsetX;
    document.onmousemove = function(evt){
        var ee = evt || window.event;
        var temp= ee.clientX - bigBox.offsetLeft - midBox.offsetLeft - x1;
        console.log(smBox.style.left);
        smBox.style.left=temp+"px";
        var maxmove = midBox.offsetWidth - smBox.offsetWidth ;//移动最大范围
        if(temp <= 0){
            smBox.style.left = 0 + "px"
        } else if(temp > maxmove){
            smBox.style.left = maxmove+"px"
        }
    };
    document.onmouseup = function(evt){//鼠标抬起时的状态
        var e = evt || window.event;
        var maxmove = midBox.offsetWidth - smBox.offsetWidth//移动最大范围
//        if(smBox.offsetLeft <= maxmove / 2){
//            smBox.style.left = 0 + "px"
//        } else if(smBox.offsetLeft > maxmove / 2){
//            smBox.style.left = maxmove+"px";
//        }
        document.onmousemove = null;
        document.onmouseup = null;
        smBox.style.left=smBox.offsetLeft <= maxmove / 2? 0+"px":maxmove+"px";//三元运算符
    }

}








</script>
